@radio-size: 12px;

.radio {
    cursor: pointer;

    display: inline-flex;
    gap: var(--margin-xs);
    align-items: center;

    box-sizing: border-box;

    font-size: var(--font-size-sm);
    color: var(--text-color);

    &:hover {
        .radio-target-input {
            &:checked + .radio-target-inner {
                &::after {
                    background-color: rgb(var(--primary-color-hover));
                }
            }
        }

        .radio-target-inner {
            border-color: rgb(var(--primary-color-hover));
        }
    }

    &-disabled {
        cursor: not-allowed;
        color: rgb(var(--grey-300));

        .radio-target-input {
            &:checked + .radio-target-inner {
                &::after {
                    background-color: rgb(var(--grey-300));
                }
            }
        }

        .radio-target-inner {
            border-color: rgb(var(--grey-300));
        }

        &:hover {
            .radio-target-input {
                &:checked + .radio-target-inner {
                    &::after {
                        background-color: rgb(var(--grey-300));
                    }
                }
            }

            .radio-target-inner {
                border-color: rgb(var(--grey-300));
            }
        }
    }

    &-target {
        position: relative;

        &-input {
            position: absolute;
            opacity: 0;

            &:checked + .radio-target-inner {
                &::after {
                    transform: scale(1);
                    box-sizing: border-box;
                    opacity: 1;
                    background-color: rgb(var(--primary-color));
                }
            }
        }

        &-inner {
            position: relative;

            display: flex;
            align-items: center;
            justify-content: center;

            box-sizing: border-box;
            width: @radio-size;
            height: @radio-size;

            border: 1px solid rgb(var(--primary-color));
            border-radius: 50%;

            transition: all 0.15s;

            &::after {
                content: '';

                transform-origin: center center;
                transform: scale(0);

                display: block;

                box-sizing: border-box;
                width: @radio-size - 4;
                height: @radio-size - 4;

                opacity: 0;
                background-color: rgb(var(--bg-color-secondary));
                border-radius: 50%;

                transition: all 0.15s;
            }
        }
    }
}
